<template>
    <div>
        <el-button @click="loadData">查 询</el-button>
        <el-button @click="handleOpenForm">对轨操作</el-button>
        <el-button @click="handleCancel">取消对轨</el-button>
        <div>
            <box></box>
            <box :type="true"></box>
        </div>
        <div class="pair-line">
            <img :src="img" alt="">
            <div class="pair-tg">
                <div :style="'width:'+train.length*65+'px'" style="height:150px">
                    <div v-for="(item,index) in train" :key="index" class="fl">
                        <div @click="handleEidtInfo(item)"> 车皮:{{ item.wagonNo }}</div>
                        <div @click="handleEidtInfo(item)"> 到站:{{ item.endStationName }}</div>
                        <div class="pair-box">
                            <div v-if="true">
                                <box v-for="(box,i) in item.containers" :key="i"></box>
                                <!-- <box :type="true"></box> -->
                            </div>
                            <span class="pair-num">{{ index+1 }}</span>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>

            </div>
        </div>
        <el-dialog title="对轨操作" :visible.sync="dialogForm" width="1165px">
            <el-form :inline="true" :model="condition" class="search-form" label-width="90px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="车皮号">
                            <el-input v-model="condition['search_LIKE_wagonNo']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发站">
                            <el-input v-model="condition['search_LIKE_endStationName']"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="pair-flex">
                <div style="width:330px">
                    <el-table :data="wagonNo" border max-height="500" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" fixed="left" prop="id" width="55"></el-table-column>
                        <el-table-column prop="wagonNo" label="车皮号" min-width="120"></el-table-column>
                        <el-table-column prop="stratStationName" label="发站" min-width="120"></el-table-column>
                    </el-table>
                </div>
                <div>
                    <el-button type="primary" class="rigth-btn-style" :disabled="multipleSelection.length===0" icon="el-icon-d-arrow-right" @click="handleWagonNo" circle></el-button>
                </div>
                <div style="width:750px">
                    <el-table :data="pairWagon" border max-height="500">
                        <el-table-column prop="wagonInPortInfo" label="车皮号" width="250px">
                            <template slot-scope='scope'>
                                <el-tag v-for="(tag,index) in scope.row.wagonInPortInfo" @close="handleClose(scope.$index,index)" style="margin:0 5px 5px 0" :key="index" closable>
                                    {{tag.wagonNo}}
                                </el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="lineNo" align="center" label="专运线号" min-width="90">
                            <template slot-scope='scope'>
                                <auto-search-line v-model="scope.row.lineNo"></auto-search-line>
                            </template>
                        </el-table-column>
                        <el-table-column prop="startParkingLot" align="center" label="车位起" min-width="70">
                            <template slot-scope='scope'>
                                <el-input-number :controls="false" :min="1" :max="scope.row.wagonInPortInfo.length" style="width:60px" v-model="scope.row.startParkingLot"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column prop="endParkingLot" align="center" label="车位止" min-width="70">
                            <template slot-scope='scope'>
                                <el-input-number :controls="false" :min="1" :max="scope.row.wagonInPortInfo.length" style="width:60px" v-model="scope.row.endParkingLot"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column prop="stratStationName" align="center" label="到站" min-width="80">
                            <template slot-scope='scope'>
                                <auto-search-port-station v-model="scope.row.endStationName" @selectCode="v=>scope.row.endStationCode=v" @selectName="v=>scope.row.endStationName=v"></auto-search-port-station>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="80" align="center">
                            <template slot-scope="scope">
                                <el-button size="small" class="danger" type="text" @click="handleRemove(scope.$index)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">确 定</el-button>
                <el-button @click="dialogForm=false">关 闭</el-button>
            </div>
        </el-dialog>
        <el-dialog title="修改信息" :visible.sync="dialogVisible" width="500px">
            <el-form :inline="true" :model="viForm" class="search-form" label-width="90px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="车皮号">
                            <el-input v-model="viForm.wagonNo" style="width:188px"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="到站">
                            <auto-search-port-station @selectCode="v=>viForm.endStationCode=v" @selectName="v=>viForm.endStationName=v" :name="viForm.endStationName"></auto-search-port-station>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import box from "./box";
import {
    getTrainPair,
    getTrainPairWagonNo,
    postTrainPair,
    editTrainPair,
    cancelTrainPair
} from "@/api/gatePanel/gatePanel";
import autoSearchLine from "@/components/autocomplete/autoSearchLine";
import autoSearchPortStation from "@/components/autocomplete/autoSearchPortStation";
export default {
    components: {
        box,
        autoSearchLine,
        autoSearchPortStation
    },
    data() {
        return {
            img: require("@/assets/img/tg.png"),
            train: 1,
            wagonNo: [],
            dialogForm: false,
            pairWagon: [],
            multipleSelection: [],
            condition: {},
            dialogVisible:false,
            viForm:{},
            id:''
        };
    },
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            getTrainPair().then(res => {
                console.log(res);
                this.train = res.data.wagonRailsInfo;
            });
            getTrainPairWagonNo().then(res => {
                this.wagonNo = res.data.aaData;
            });
        },
        handleOpenForm() {
            this.dialogForm = true;
        },
        handleSelectionChange(item) {
            this.multipleSelection = item;
        },
        handlePair() {},
        handleWagonNo() {
            if (this.multipleSelection.length === 0) {
                this.$message({ message: "请先选择一条数据!", type: "error" });
                return null;
            }
            let data = {
                wagonInPortInfo: [],
                lineNo: "",
                startParkingLot: "",
                endParkingLot: "",
                endStationName: ""
            };
            let select = JSON.parse(JSON.stringify(this.multipleSelection));
            for (let i = 0; i < select.length; i++) {
                const element = select[i];
                data.wagonInPortInfo.push(element);
            }
            this.wagonNo = this.wagonNo.filter(res => {
                return !this.multipleSelection.includes(res);
            });
            this.pairWagon.push(data);
        },
        handleClose(index, i) {
            this.wagonNo.push(this.pairWagon[index].wagonInPortInfo[i]);
            this.pairWagon[index].wagonInPortInfo.splice(i, 1);
            if (this.pairWagon[index].wagonInPortInfo.length === 0) {
                this.pairWagon.splice(index, 1);
            }
        },
        handleRemove(index) {
            this.wagonNo.push(...this.pairWagon[index].wagonInPortInfo);
            this.pairWagon.splice(index, 1);
        },
        handleSubmit() {
            if (this.pairWagon.length === 0) {
                this.$message({ message: "请先选择一条数据!", type: "error" });
                return null;
            }
            console.log(this.pairWagon);
            postTrainPair(this.pairWagon).then(res => {
                this.$message({ message: "对轨成功!", type: "success" });
                this.dialogForm = false;
            });
        },
        handleEidtInfo(item){
            console.log(item);
            this.dialogVisible=true
            this.viForm.wagonNo=item.wagonNo
            this.viForm.endStationName=item.endStationName
            this.viForm.endStationCode=item.endStationCode
            this.id=item.infoId
        },
        handleEdit(){
            editTrainPair(this.id,this.viForm).then(res=>{
                this.$message({message:'修改成功!',type:'success'})
                this.dialogVisible=false
            })
        },
        handleCancel(){
            let data=this.train
            let arr=[]
            for (let i = 0; i < data.length; i++) {
                const el = data[i];
                if(el.containers.length===0){
                    arr.push({id:el.infoId})
                }
            }
            if(arr.length===0){
                this.$message({message:'暂无可取消数据',type:'warn'})
                return null
            }
            cancelTrainPair(arr).then(res=>{
                this.$message({message:'取消成功!',type:'success'})
                this.loadData()
            })
        }
    },
    watch: {
        dialogForm(bool) {
            if (!bool) {
                this.loadData();
                this.pairWagon = [];
            }
        },
        dialogVisible(bool){
            if(!bool){
                this.loadData()
            }
        }
    }
};
</script>

<style>
.pair-flex {
    display: flex;
    align-items: center;
}
.pair-flex-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.pair-line {
    position: relative;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    text-align: right;
}
.pair-tg {
    position: absolute;
    top: 5px;
    right: 90px;
    width: 900px;
    overflow: auto;
}
.pair-box {
    width: 40px;
    height: 75px;
    border: 2px solid #dfd1d1;
    margin-left: 15px;
    border-radius: 5px;
    background-color: #fff;
    position: relative;
}
.pair-num {
    position: absolute;
    top: 85px;
    left: 0;
}
.pair-set-box {
    max-height: 500px;
    height: 500px;
    width: 60%;
    border: 1px solid #ebeef5;
    padding: 20px;
}
.rigth-btn-style {
    font-size: 20px;
    padding: 6px;
    margin: 0 10px;
}
</style>
